<template>
    <div class='flex'>
        <User />
        <div class='flex-1 m-l-30'>
            <section>
                <div class='flex-align-items-center'>
                    <div class='flex-1'><span :class='$style.title'>策略跟踪</span></div>
                    <router-link to='/strategy/follow'>更多</router-link>
                </div>
                <div class='m-t-10'>
                    <template v-if='!researchLoding'>
                        <table :class='$style.table'>
                            <tr>
                                <th>策略名</th>
                                <th>累计收益</th>
                                <th>今日收益</th>
                                <th>最大回撤</th>
                            </tr>
                            <template v-if='strategyResearchRows.length > 0'>
                                <tr v-for='(item, index) in strategyResearchRows' :key='index'>
                                    <td>{{item.name}}</td>
                                    <td>{{item.cumulative_income_radio}}</td>
                                    <td>{{item.today_income_radio}}</td>
                                    <td>{{item.max_drawdown}}</td>
                                </tr>
                            </template>
                            <template v-else>
                                <tr>
                                    <td colspan='4'><a-empty :image='simpleImage' /></td>
                                </tr>
                            </template>
                        </table>
                    </template>
                    <template v-else>
                        <a-skeleton active />
                    </template>
                </div>
            </section>

            <section class='m-t-30 flex'>
                <div class='flex-1'>
                    <div class='flex-align-items-center'>
                        <div class='flex-1'><span :class='$style.title'>我的策略</span></div>
                        <router-link to='/strategy?target=my'>更多</router-link>
                    </div>
                    <div class='m-t-10'>
                        <template v-if='!myStrategyLoding'>
                            <table :class='$style.table'>
                                <tr>
                                    <th>策略名</th>
                                    <th>回测次数</th>
                                </tr>
                                <template v-if='myStrategyRows.length > 0'>
                                    <tr v-for='(item, index) in myStrategyRows' :key='index'>
                                        <td>{{item.name}}</td>
                                        <td><router-link :to='"/strategy/backTest/" + item.strategy_id'>{{item.count_st}}</router-link></td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan='2'><a-empty :image='simpleImage' /></td>
                                    </tr>
                                </template>
                            </table>
                        </template>
                        <template v-else>
                            <a-skeleton active />
                        </template>
                    </div>
                </div>
                <div class='flex-1 m-l-30'>
                    <div class='flex-align-items-center'>
                        <div class='flex-1'><span :class='$style.title'>指数信号</span></div>
                        <router-link to='/account?target=msg'>更多</router-link>
                    </div>
                    <div class='m-t-10'>
                        <template v-if='!indexsignalLoding'>
                            <table :class='$style.table'>
                                <tr>
                                    <th>指数</th>
                                    <th>内容</th>
                                    <th>时间</th>
                                </tr>
                                <template v-if='indexsignalRows.length > 0'>
                                    <tr v-for='(item, index) in indexsignalRows' :key='index'>
                                        <td>{{item.index_name}}</td>
                                        <td>
                                            <a-tooltip>
                                                <template #title>{{item.content}}</template>
                                                {{item.content.slice(0, 15)}}...
                                            </a-tooltip>
                                        </td>
                                        <td>{{item.create_at}}</td>
                                    </tr>
                                </template>
                                <template v-else>
                                    <tr>
                                        <td colspan='2'><a-empty :image='simpleImage' /></td>
                                    </tr>
                                </template>
                            </table>
                        </template>
                        <template v-else>
                            <a-skeleton active />
                        </template>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { Empty } from 'ant-design-vue';
import { ref } from "@vue/reactivity";
import { strategyResearchApi, myStrategyApi, indexsignalApi } from '@/api/myResearch'
import User from './User.vue'

    const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

    const abc = ref('')

    const researchLoding = ref(true)
    const strategyResearchRows = []

    strategyResearchApi().then(data => {
        researchLoding.value = false
        strategyResearchRows.push(...data)
    })

    const myStrategyLoding = ref(true)
    const myStrategyRows = []

    myStrategyApi().then(data => {
        myStrategyLoding.value = false
        myStrategyRows.push(...data)
    })

    const indexsignalLoding = ref(true)
    const indexsignalRows = []

    indexsignalApi().then(data => {
        indexsignalLoding.value = false
        indexsignalRows.push(...data)
    })



</script>


<style scoped lang='scss' module>
.title{
    font-size: 16px;
    font-weight: bold;
}

.table{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    width: 100%;
    
    td, th{
        border: 1px solid #f0f0f0;
    }

    th{
        height: 46px;
        font-weight: bold;
    }

    td{
        padding: 10px 0;
    }
}
</style>